<template>
  <div class="dashboard-container" style="padding: 50px;">
    <el-row class="Chapter-addition">
      <el-row :gutter="20">
        <el-col :span="12" :offset="6" style="display: flex;">
          <div class="grid-content bg-purple">
           <el-form :model="conforderform" ref="conforderform" label-width="100px" class="demo-ruleForm">
           	<el-form-item style="margin-bottom: 0px;">
           		<!-- 渲染问题列表 -->
           		<section v-for="(value, index) in conforderform.lastquestions" :key="index" style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
                <span class="What-chapter">第{{ index + 1 }}章</span>
                <span class="What-chapter" style="font-size: inherit; font-weight: 400;">章节名称：</span>
           			<section style="width: 100%;">
           				<el-row>
           					<el-col :span="22">
           						<el-input v-model="conforderform.lastquestions[index]" placeholder="请输入章节名称" clearable/>
           					</el-col>
           					<el-col :span="2" style="display: flex;">
           						<el-button type="primary" icon="el-icon-plus" plain style="margin-left:10px;" circle @click="addlastitems(index, '1')"/>
                      <el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="rmlastitems(index, '1')"/>
           					</el-col>
           				</el-row>
           			</section>
<!--           			<section v-if="index > 0" style="width: 100%;">
           				<el-row style="margin-top:10px;">
           					<el-col :span="22">
           						<el-input v-model="conforderform.lastquestions[index]" placeholder="请输入章节名称" clearable @keyup.enter.native="addlastitems(index, '1')"/>
           					</el-col>
           					<el-col :span="2">
           						<el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="rmlastitems(index, '1')"/>
           					</el-col>
           				</el-row>
           			</section> -->
           		</section>
           	</el-form-item>
           </el-form>
          </div>
        </el-col>
      </el-row>
    </el-row>

    <!-- 添加 -->
    <el-row class="chapter-add-to">
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="chapterAdd">添加</el-button>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>

import {chapterList, chapterAdd, chapterInfo, chapterEdit, chapterDel} from "@/api/Chapter_management";
export default {
  data() {
    return {
      input: '',
      conforderform: {
        confname: '', // 会议名称
      	conflevel: '', // 会议级别
      	confattrs: [], // 会议属性
      	startdate: '', // 会议开始日期
      	starttime: '', // 会议开始时间
      	enddate: '', // 会议结束日期
      	endtime: '', // 会议结束时间
      	lastquestions: [''],
      	curquesttions: [''],
      	suggestions: [''],
        number: []
      }
    }
  },
  computed: {

  },
  mounted() {

  },
  filters: {

  },
  methods: {
    chapterAdd () {
      for (let i in this.conforderform.lastquestions) {
        this.conforderform.number.push(Number(i) + 1)
      }
      chapterAdd({
        "chapter_subjectId": this.$route.query.chapterId,
        "chapter_listNum": this.conforderform.number,
        	"chapter_name": this.conforderform.lastquestions
      }).then(response => {
         this.$router.go(-1)
      })
    },
    addlastitems(index, type) {
       for (let i in this.conforderform.lastquestions) {
         if(this.conforderform.lastquestions[i].trim() === '') {
            this.$message.error('请您填写完一项后继续追加')
            return
         }
       }
       this.conforderform.lastquestions.push('')
      },
      rmlastitems(index, type) {
    	switch (type) {
    	  case '1':
    		this.conforderform.lastquestions.splice(index, 1)
    		break
    	  case '2':
    		this.conforderform.curquesttions.splice(index, 1)
    		break
    	  case '3':
    		this.conforderform.suggestions.splice(index, 1)
    		break
    	  default:
    		break
    	}
    	this.$message.success('移除成功')
    }
  }
}
</script>
<style scoped>
  /deep/ .el-form-item__label{
    font-size: inherit;
  }
  /deep/ .el-form-item__content{
    margin-left: 0px !important;
  }
</style>
<style>
  .Chapter-addition .grid-content{width: 100%;}
  .Chapter-addition .grid-content .add-to{width: 100%;display: flex;align-items: center;justify-content: center;}
  .Chapter-addition .grid-content .What-chapter{width: 15%;display: flex;justify-content: center;font-weight: bold;font-size: 18px; line-height: 41px;}
  .Chapter-addition .grid-content .Chapter-title{width: 20%;display: flex;align-items: center;justify-content: center;}
  .Chapter-addition .add-button{width: 44px; height: 40px; margin-left: 20px; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-color: #b9b9b9;cursor: pointer;}
  .Chapter-addition .add-button .add-button-span{font-size: 35px; color: #fff;}
  .Chapter-addition .demo-ruleForm{width: 100%;}
  .Chapter-addition .demo-ruleForm .el-row{margin-top: 0px !important;}
 .chapter-add-to{margin-top: 20px;}
 .chapter-add-to .el-button{width: 100%;}
</style>
